import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { Users, ShoppingCart, DollarSign, TrendingUp, Package, FileText, BarChart3, Activity } from "lucide-react";

export default function DashboardPage() {
  const stats = [
    {
      title: "总用户数",
      value: "12,345",
      change: "+12%",
      changeType: "positive" as const,
      icon: Users,
    },
    {
      title: "总订单数",
      value: "8,901",
      change: "+8%",
      changeType: "positive" as const,
      icon: ShoppingCart,
    },
    {
      title: "总收入",
      value: "¥123,456",
      change: "+15%",
      changeType: "positive" as const,
      icon: DollarSign,
    },
    {
      title: "产品数量",
      value: "567",
      change: "+5%",
      changeType: "positive" as const,
      icon: Package,
    },
  ];

  const recentActivities = [
    {
      id: 1,
      user: "张三",
      action: "购买了产品",
      product: "iPhone 15 Pro",
      time: "2分钟前",
    },
    {
      id: 2,
      user: "李四",
      action: "注册了新账户",
      product: "",
      time: "5分钟前",
    },
    {
      id: 3,
      user: "王五",
      action: "提交了订单",
      product: "MacBook Air",
      time: "10分钟前",
    },
    {
      id: 4,
      user: "赵六",
      action: "发表了评论",
      product: "AirPods Pro",
      time: "15分钟前",
    },
  ];

  return (
    <div className="space-y-6">
      {/* 页面标题 */}
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-bold text-foreground">仪表盘</h1>
          <p className="text-muted-foreground">欢迎回来，这里是您的数据概览</p>
        </div>
        <Button>
          <Activity className="mr-2 h-4 w-4" />
          生成报告
        </Button>
      </div>

      {/* 统计卡片 */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
        {stats.map((stat) => (
          <Card key={stat.title}>
            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
              <CardTitle className="text-sm font-medium text-muted-foreground">
                {stat.title}
              </CardTitle>
              <stat.icon className="h-4 w-4 text-muted-foreground" />
            </CardHeader>
            <CardContent>
              <div className="text-2xl font-bold text-foreground">{stat.value}</div>
              <div className="flex items-center pt-1">
                <TrendingUp className="h-4 w-4 text-green-500" />
                <span className="text-sm text-green-600 ml-1">{stat.change}</span>
                <span className="text-sm text-muted-foreground ml-1">相比上月</span>
              </div>
            </CardContent>
          </Card>
        ))}
      </div>

      {/* 主要内容区域 */}
      <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
        {/* 最近活动 */}
        <Card className="lg:col-span-2">
          <CardHeader>
            <CardTitle>最近活动</CardTitle>
            <CardDescription>系统内的最新动态</CardDescription>
          </CardHeader>
          <CardContent>
            <div className="space-y-4">
              {recentActivities.map((activity) => (
                <div key={activity.id} className="flex items-center space-x-4">
                  <div className="h-8 w-8 rounded-full bg-primary/10 flex items-center justify-center">
                    <Users className="h-4 w-4 text-primary" />
                  </div>
                  <div className="flex-1 space-y-1">
                    <p className="text-sm font-medium">
                      <span className="text-foreground">{activity.user}</span>
                      <span className="text-muted-foreground"> {activity.action}</span>
                      {activity.product && (
                        <span className="text-foreground"> {activity.product}</span>
                      )}
                    </p>
                    <p className="text-xs text-muted-foreground">{activity.time}</p>
                  </div>
                </div>
              ))}
            </div>
          </CardContent>
        </Card>

        {/* 快速操作 */}
        <Card>
          <CardHeader>
            <CardTitle>快速操作</CardTitle>
            <CardDescription>常用功能快捷入口</CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Button variant="outline" className="w-full justify-start">
              <Users className="mr-2 h-4 w-4" />
              添加用户
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <Package className="mr-2 h-4 w-4" />
              添加产品
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <FileText className="mr-2 h-4 w-4" />
              创建内容
            </Button>
            <Button variant="outline" className="w-full justify-start">
              <BarChart3 className="mr-2 h-4 w-4" />
              查看报表
            </Button>
          </CardContent>
        </Card>
      </div>

      {/* 系统状态 */}
      <Card>
        <CardHeader>
          <CardTitle>系统状态</CardTitle>
          <CardDescription>当前系统运行状态</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="grid gap-4 md:grid-cols-4">
            <div className="flex items-center space-x-2">
              <div className="h-3 w-3 rounded-full bg-green-500"></div>
              <span className="text-sm">服务器运行正常</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="h-3 w-3 rounded-full bg-green-500"></div>
              <span className="text-sm">数据库连接正常</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="h-3 w-3 rounded-full bg-green-500"></div>
              <span className="text-sm">缓存服务正常</span>
            </div>
            <div className="flex items-center space-x-2">
              <div className="h-3 w-3 rounded-full bg-green-500"></div>
              <span className="text-sm">文件存储正常</span>
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}
